<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常用表单控件</title>
    <link rel="stylesheet" href="css/user.css">
</head>

<body>
    <form action="#">
        <ul>
            <li>
                <label>姓名：</label>
                <input class="right" type="text" value="张三" maxlength="6" />
            </li>
            <li>
                <label>出生日期：</label>
                <input class="right" type="date">
            </li>
            <li>
                <label>性别：</label>
                <div class="right">
                    <input type="radio" name="male" />
                    <label for="male">男</label>
                    <input type="radio" name="female" />
                    <label for="female">女</label>
                </div>
            </li>
            <li>
                <label>体重：</label>
                <div class="right">
                    <input tpye="number" name="weight" min="10" max="100" />kg
                </div>

            </li>
            <li>
                <label>兴趣爱好：</label>
                <div class="right">
                    <input type="checkbox" id="sing" name="hobby[]">
                    <label for="sing">唱歌</label>
                    <input type="checkbox" id="dance" name="hobby[]">
                    <label for="dance">唱歌</label>
                    <input type="checkbox" id="swim" name="hobby[]">
                    <label for="swim">唱歌</label>
                </div>
            </li>
            <li>
                <label>颜色选择：</label>
                <input class="right" type="color" name="color" value="#ff0000" />
            </li>
            <li>
                <label>上传头像：</label>
                <input class="right" type="file" />
            </li>
            <li class="advise">
                <label>您的建议</label>
                <textarea name="opinion" cols="30" rows="10" placeholder="请输入"></textarea>
            </li>
            <li class="footer">
                <input type="submit" value="提交">
            </li>
        </ul>
    </form>
</body>

</html>